<template>
	<view>
		<view class="container">
			<view class="time-module">时间：{{ currentTime }}</view>
		  <!-- 外层容器 -->
			<view class="params-container">
		    <!-- 数据行 -->
				<view class="param-row" v-for="(params, rowIndex) in paramsData" :key="rowIndex">
				<!-- 数据列 -->
					<view class="param-col" v-for="param in params" :key="param.key">
						<view class="param-value">{{ param.value || 0 }}</view> <!-- 数据值，如果没有值则显示0 -->
						<view class="param-name">{{ param.name }}</view> <!-- 数据名称 -->
					</view>
				</view>
			</view>
		</view>
		<button @click="sendMessage">更新数据</button>
		 
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			webSocket: null, // 用于存储 WebSocket 连接
			messages: [] ,// 用于存储接收到的消息
			
			currentTime: new Date().toLocaleTimeString(),
		  // 假设的塔机参数数据，初始化默认值为零
			paramsData: [
				{
				max_load_percent: { value: '', name: '最大载重百分比 (%)' },
				max_torque_percent: { value: '', name: '最大力矩百分比 (%)' },
				max_wind_speed: { value: '', name: '最大风速 (m/s)' },
				},
				{
				start_angle: { value: '', name: '开始转角 (°)' },
				start_amplitude: { value: '', name: '开始幅度 (m)' },
				start_height: { value: '', name: '开始起升高度 (m)' },
				},
				{
				end_angle: { value: '', name: '结束转角 (°)' },
				end_amplitude: { value: '', name: '结束幅度 (m)' },
				end_height: { value: '', name: '结束起升高度(m)' },
				},
			],
			
		};
	},
	
	
	
	created() {
		this.openWebSocket();
		this.updateTime();
	},
	
	methods: {
		openWebSocket() {
		  const wsUrl = 'ws://192.168.43.96:8081/ws'; // WebSocket 服务器地址
		  this.webSocket = new WebSocket(wsUrl);
		
		  this.webSocket.onopen = () => {
		    console.log('WebSocket 连接已打开');
		  };
		
		  this.webSocket.onerror = (error) => {
		    console.error('WebSocket 出现错误:', error);
		  };
		
		this.webSocket.onmessage = (event) => {
			
		    const messages = JSON.parse(event.data); // 解析接收到的 JSON 数据
		    if (Array.isArray(messages)) {
		        // 如果是数组，只取最后一个元素
		        const lastMessage = messages[messages.length - 1];
		        // 更新参数和显示最后一条消息
		        this.updateParams(lastMessage);
		        this.messages = [JSON.stringify(lastMessage)]; // 只存储最后一条消息
		      } else {
		        // 如果不是数组，直接处理和显示接收到的消息
		        this.updateParams(messages);
		        this.messages = [JSON.stringify(messages)]; // 存储最后一条消息
		      }
		          };
		
		  this.webSocket.onclose = () => {
		    console.log('WebSocket 连接已关闭');
		  };
		},
		sendMessage() {
		  if (this.webSocket.readyState === WebSocket.OPEN) {
		    const message = JSON.stringify({ action: 'queryLiftingData' }); // 发送的消息
		    this.webSocket.send(message);
		  } else {
		    console.error('WebSocket 连接未建立或已关闭');
		  }
		  
		  
		},
		
	    updateTime() {
			this.currentTime = new Date().toLocaleTimeString();
	      // 每秒更新时间
			setInterval(() => {
				this.currentTime = new Date().toLocaleTimeString();
			}, 1000);
	    },
		
		updateParams(currentData) {
		      // 更新 paramsData 对象，以反映最新的数据
		    this.paramsData.forEach(row => {
		        Object.keys(row).forEach(key => {
		            if (currentData.hasOwnProperty(key)) {
						row[key].value = currentData[key].toString();
					}
				});
			});	
		},
	}
}
</script>

<!-- 样式部分保持不变 -->

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* 确保容器从左上角开始布局 */
		padding: 20px;
	}
	
	.time-module {
		position: absolute; /* 绝对定位，放置在左上角 */
		top: 5px; /* 距离顶部20px */
		left: 20px; /* 距离左侧20px */
		font-size: 16px;
		color: #333;
	}

	.params-container {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	.param-row {
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	  margin-bottom: 10px;
	}

	.param-col {
	  flex: 1;
	  text-align: center;
	}

	.param-value {
	  font-size: 36px;
	  margin-bottom: 5px;
	  color: aqua;
	}

	.param-name {
	  font-size: 14px;
	  color: #666;
	}
	
	button {
	  margin: 10px 0;
	  padding: 10px;
	  font-size: 16px;
	}
</style>